<div class="flex items-center">
  <%= form_for line_item, url: spree.line_item_url(line_item, order_token: line_item.order.token), data: { controller: 'turbo-stream-form' } do |item_form| %>
    <div class="quantity-picker" data-controller="quantity-picker" data-quantity-picker-disabled-class="opacity-50 cursor-not-allowed">
      <!-- this is a dummy button to work with turbo frame forms when hitting ENTER -->
      <%= button_tag render('spree/shared/icons/minus'), type: 'submit', class: 'hidden' %>
      <%= quantity_modifier_button_tag render('spree/shared/icons/minus'), type: 'submit', action: 'decrease', class: 'quantity-decrease-button' %>
      <%= item_form.number_field(:quantity, quantity_field_options(max: line_item.maximum_quantity)) %>
      <%= quantity_modifier_button_tag render('spree/shared/icons/plus'), type: 'submit', action: 'increase', class: 'quantity-increase-button' %>
    </div>
  <% end %>
</div>
